<template>
	<view class="flex-col page">
		<view class="flex-col">
			<MyHeader :title="title"></MyHeader>
			<view class="flex-col list">
				<block v-for="(item, index) in items" :key="index">
					<view @click="goDetail(item,index)" class="flex-row justify-between self-stretch list-item">
						<view class="flex-row items-center group_2">
							<view class="flex-col justify-start items-start shrink-0 relative group_3">
								<image class="image_6" :src="item.imageUrl" />
								<view class="flex-col justify-start items-center text-wrapper pos" v-if="item.number!=0">
									<text class="font">{{item.number}}</text>
								</view>
							</view>
							<view class="rightBox">
								<view class="">
									{{item.userName}}
								</view>
								<view class="rightMsg">
									{{item.message}}
								</view>
							</view>
						</view>
						<text class="self-start font_3 text">{{item.sentTime}}</text>
					</view>
				</block>
			</view>
		</view>
	</view>
	<!-- 底部自定义tabbar -->
	<myTabbar></myTabbar>
</template>

<script setup>
	import {
		reactive,
		ref,
	} from 'vue';
	import {
		getmessageCountMessageListAPI
	} from '@/apis/message.js'
	import {
		useUserStore
	} from '@/store/useUserStore.js'
	import {
		onShow,
		onLoad
	} from '@dcloudio/uni-app'
	import {
		isLoginAndGo
	} from '@/utils';



	const userStore = useUserStore()
	const items = ref([])
	const goDetail = (item, index) => {
		uni.navigateTo({
			url: '/otherpages/job/connect?targetUserId=' + item.senderId +
				'&module=' + module.value + '&receiveImg=' + item.imageUrl + '&userName=' + item.userName
		})
	}
	const getMessageList = async (module) => {
		const res = await getmessageCountMessageListAPI({
			receiverId: userStore.userInfo.id,
			module,
		})
		items.value = res.data
	}
	const module = ref('')
	const title = ref('')
	onLoad((options) => {
		console.log(options);
		getMessageList(options.module)
		module.value = options.module
		title.value = options.xiaoxiMsg
	})
	getMessageList(module.value)
</script>

<style scoped lang="scss">
	.rightBox {
		margin-left: 30rpx;

		.rightMsg {
			color: rgba(153, 153, 153, 1);
		}
	}

	.ml-5 {
		margin-left: 10rpx;
	}

	.ml-11 {
		margin-left: 22rpx;
	}

	.mt-284 {
		margin-top: 568rpx;
	}

	.ml-101 {
		margin-left: 202rpx;
	}

	.page {
		background-color: #f7f8fa;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100%;
	}

	.section {
		padding: 0 12rpx 28rpx;
		background-image: linear-gradient(180deg, #4c8eef 0%, #84bbd900 100%);
	}

	.group {
		padding: 34rpx 16rpx 40rpx;
	}

	.image {
		width: 34rpx;
		height: 22rpx;
	}

	.image_2 {
		width: 30rpx;
		height: 22rpx;
	}

	.image_3 {
		width: 48rpx;
		height: 22.66rpx;
	}

	.section_2 {
		padding: 12rpx 24rpx;
		background-color: #ffffff99;
		border-radius: 50rpx;
		width: 174rpx;
		border-left: solid 1rpx #97979733;
		border-right: solid 1rpx #97979733;
		border-top: solid 1rpx #97979733;
		border-bottom: solid 1rpx #97979733;
	}

	.image-wrapper {
		width: 38rpx;
	}

	.image_5 {
		width: 38rpx;
		height: 14rpx;
	}

	.section_3 {
		background-color: #33333333;
		width: 1rpx;
		height: 37rpx;
	}

	.image_4 {
		width: 34rpx;
		height: 34rpx;
	}

	.list {
		padding-top: 16rpx;
	}

	.list-item {
		padding: 20rpx 30rpx 0;
	}

	.group_2 {
		width: 212.96rpx;
	}

	.group_3 {
		padding-top: 12rpx;
		width: 96rpx;
	}

	.image_6 {
		border-radius: 12rpx;
		width: 84rpx;
		height: 84rpx;
	}

	.text-wrapper {
		padding: 8rpx 0;
		background-color: #f52f00;
		border-radius: 50%;
		width: 28rpx;
	}

	.pos {
		position: absolute;
		right: 0;
		top: 0;
	}

	.font {
		font-size: 20rpx;
		font-family: SourceHanSansCN;
		line-height: 14.66rpx;
		color: #ffffff;
	}

	.font_3 {
		font-size: 24rpx;
		font-family: SourceHanSansCN;
		line-height: 22.1rpx;
		color: #999999;
	}

	.text {
		margin-top: 48rpx;
		line-height: 18.22rpx;
	}

	.font_2 {
		font-size: 32rpx;
		font-family: SourceHanSansCN;
		line-height: 29.66rpx;
		color: #333333;
	}

	.section_4 {
		padding: 6rpx 0;
		filter: drop-shadow(0rpx -4rpx 8rpx #a1727214);
		background-color: #ffffff;
	}

	.equal-division-item {
		width: 48rpx;
		height: 48rpx;
	}

	.pos_2 {
		position: absolute;
		right: 336rpx;
		top: 0;
	}
</style>